import React, { useState, useEffect, useRef } from 'react';

import { Button } from 'antd';

import MarkdownRenderer from '@/components/MarkdownRenderer';
import SvgIcon from '@/components/SvgIcon';

import { useAIApi } from '../../hooks/useAIApi';

interface ScoringTab2Props {
	infoList: string;
}

// 创建一个ref来持久化保存组件状态
const scoringTab2StateRef = {
	isLoading: false,
	scoreResult: '' as string,
	requestPromise: null as Promise<any> | null
};

const ScoringTab2: React.FC<ScoringTab2Props> = ({ infoList }) => {
	const [scoreResult, setScoreResult] = useState<string>(scoringTab2StateRef.scoreResult);
	const [isLoading, setIsLoading] = useState<boolean>(scoringTab2StateRef.isLoading);
	const { callQwen3API } = useAIApi();
	const isMounted = useRef(false);

	// 更新ref中的状态
	useEffect(() => {
		scoringTab2StateRef.isLoading = isLoading;
		scoringTab2StateRef.scoreResult = scoreResult;
	}, [isLoading, scoreResult]);

	useEffect(() => {
		isMounted.current = true;
		return () => {
			isMounted.current = false;
		};
	}, []);

	// 组件挂载时恢复状态
	useEffect(() => {
		// 如果有正在进行的请求，保持加载状态
		if (scoringTab2StateRef.requestPromise) {
			setIsLoading(true);
		} else {
			// 否则重置加载状态
			scoringTab2StateRef.isLoading = false;
			setIsLoading(false);
		}
		setScoreResult(scoringTab2StateRef.scoreResult);

		// 如果有正在进行的请求，处理它
		if (scoringTab2StateRef.requestPromise) {
			scoringTab2StateRef.requestPromise
				.then(res => {
					if (isMounted.current) {
						if (res?.choices?.[0]?.message?.content) {
							setScoreResult(res.choices[0].message.content);
							scoringTab2StateRef.scoreResult = res.choices[0].message.content;
						} else {
							setScoreResult('评分失败，请重试');
							scoringTab2StateRef.scoreResult = '评分失败，请重试';
						}
						setIsLoading(false);
						scoringTab2StateRef.isLoading = false;
						scoringTab2StateRef.requestPromise = null;
					} else {
						// 即使组件未挂载，也存储结果到ref中
						if (res?.choices?.[0]?.message?.content) {
							scoringTab2StateRef.scoreResult = res.choices[0].message.content;
						} else {
							scoringTab2StateRef.scoreResult = '评分失败，请重试';
						}
						scoringTab2StateRef.isLoading = false;
						scoringTab2StateRef.requestPromise = null;
					}
				})
				.catch(error => {
					console.error('评分失败:', error);
					if (isMounted.current) {
						setScoreResult('评分失败，请重试');
						scoringTab2StateRef.scoreResult = '评分失败，请重试';
						setIsLoading(false);
						scoringTab2StateRef.isLoading = false;
						scoringTab2StateRef.requestPromise = null;
					} else {
						scoringTab2StateRef.scoreResult = '评分失败，请重试';
						scoringTab2StateRef.isLoading = false;
						scoringTab2StateRef.requestPromise = null;
					}
				});
		}
	}, []);

	const handleScore = async () => {
		if (!infoList.trim()) {
			if (isMounted.current) {
				setScoreResult('请先提供转录内容');
				scoringTab2StateRef.scoreResult = '请先提供转录内容';
			}
			return;
		}

		setIsLoading(true);
		scoringTab2StateRef.isLoading = true;
		setScoreResult('');
		scoringTab2StateRef.scoreResult = '';

		try {
			// 模板二的prompt：请根据讲车录音内容的沟通逻辑性，客户互动与引导，服务规范性，时间把控对录音进行评分，满分100.
			const prompt = `请根据讲车录音内容的沟通逻辑性，客户互动与引导，服务规范性，时间把控对录音进行评分，满分100。

请按照以下格式输出评分结果：

### 1. 总得分：XX分

### 2. 各维度得分详情：

| 评分维度 | 得分 | 评分标准 | 评分理由 |
|---------|------|---------|---------|
| 沟通逻辑性 | XX/30分 | 框架清晰，过渡自然，无混乱 | （请详细说明为什么给出这个分数，举例说明优点或不足） |
| 客户互动与引导 | XX/30分 | 互动≥3次，疑问解答全，有引导 | （请详细说明为什么给出这个分数，举例说明优点或不足） |
| 服务规范性 | XX/25分 | 礼貌用语全，语气耐心，无禁忌语 | （请详细说明为什么给出这个分数，举例说明优点或不足） |
| 时间把控 | XX/15分 | 核心内容占比≥70%，无冗余 | （请详细说明为什么给出这个分数，举例说明优点或不足） |

### 3. 总体评价：
（请给出整体表现的简要总结和改进建议）

评分参考：
| 维度 | 权重 | 分值范围 | 优秀标准 |
|------|------|---------|---------|
| 沟通逻辑性 | 30% | 0-30分 | 框架清晰，过渡自然，无混乱 |
| 客户互动与引导 | 30% | 0-30分 | 互动≥3次，疑问解答全，有引导 |
| 服务规范性 | 25% | 0-25分 | 礼貌用语全，语气耐心，无禁忌语 |
| 时间把控 | 15% | 0-15分 | 核心内容占比≥70%，无冗余 |

			转录内容：
			${infoList}`;

			// 存储当前请求的Promise
			const requestPromise = callQwen3API(prompt);
			scoringTab2StateRef.requestPromise = requestPromise;

			const res = await requestPromise;

			// 清除当前请求
			scoringTab2StateRef.requestPromise = null;

			if (isMounted.current) {
				if (res?.choices?.[0]?.message?.content) {
					setScoreResult(res.choices[0].message.content);
					scoringTab2StateRef.scoreResult = res.choices[0].message.content;
				} else {
					setScoreResult('评分失败，请重试');
					scoringTab2StateRef.scoreResult = '评分失败，请重试';
				}
			} else {
				// 即使组件未挂载，也存储结果到ref中
				if (res?.choices?.[0]?.message?.content) {
					scoringTab2StateRef.scoreResult = res.choices[0].message.content;
				} else {
					scoringTab2StateRef.scoreResult = '评分失败，请重试';
				}
			}
		} catch (error) {
			console.error('评分失败:', error);
			scoringTab2StateRef.requestPromise = null;

			if (isMounted.current) {
				setScoreResult('评分失败，请重试');
				scoringTab2StateRef.scoreResult = '评分失败，请重试';
			} else {
				scoringTab2StateRef.scoreResult = '评分失败，请重试';
			}
		} finally {
			if (isMounted.current) {
				setIsLoading(false);
				scoringTab2StateRef.isLoading = false;
			} else {
				// 确保即使组件未挂载，也更新ref中的状态
				scoringTab2StateRef.isLoading = false;
			}
		}
	};

	return (
		<div className="flex-col flex-1 px-8 py-6">
			<div className="text-5 font-medium mb-4">沟通表现评分</div>

			<div className="mb-4 p-4 bg-green-50 rounded-lg">
				<h3 className="font-medium mb-2">评分维度：</h3>
				<ul className="list-disc pl-5 text-sm">
					<li>沟通逻辑性（30分）：框架清晰，过渡自然，无混乱</li>
					<li>客户互动与引导（30分）：互动≥3 次，疑问解答全，有引导</li>
					<li>服务规范性（25分）：礼貌用语全，语气耐心，无禁忌语</li>
					<li>时间把控（15分）：核心内容占比≥70%，无冗余</li>
				</ul>
			</div>

			<div className="flex items-center mb-4">
				<Button type="primary" onClick={handleScore} disabled={isLoading || !infoList.trim()}>
					{isLoading ? '评分中...' : '开始评分'}
				</Button>
			</div>

			{scoreResult && (
				<div className="bg-gray-100 p-4 rounded-lg h-[300px] overflow-auto">
					<h3 className="font-medium mb-2">评分结果：</h3>
					<MarkdownRenderer content={scoreResult} className="scoring-result" />
				</div>
			)}

			{!infoList.trim() && (
				<div className="text-gray-500 text-center py-10">
					暂无转录内容，请先在转写标签页上传或录制音频
				</div>
			)}
		</div>
	);
};

export default ScoringTab2;
